<template>
	<view class="container" v-if="match.matchId">
		<view class="headbg">
			<image src="@/public/images/match/zqbsxq_bg.jpg" mode="widthFix"></image>
		</view>
		<uni-nav-bar class="ch-nav" height="88rpx" :backgroundColor="navBgColor" leftWidth="100" rightWidth="100" color="#fff" :fixed="true" :padding="false" :border="false" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhb.png" mode="aspectFit"></image>
			</template>
			<view class="title flex-c ac jc">
				<text class="text-small">{{match.competitionName}}{{JSON.parse(match.round).round_num ? ' | 第'+JSON.parse(match.round).round_num +'轮' : ''}}</text>
				<text class="text-mini">{{match.matchTime}} {{ match.jcNum ? weekDay(match.jcNum.substring(0,1)) + ' ' + match.jcNum.slice(1,4) : ( match.bdNum ? '北单'+match.bdNum : '')}}</text>
			</view>
			<template slot="right" v-if="statusId == 1">
				<image 
					class="right" 
					mode="aspectFit" 
					:src="isFavMatch ? require('@/public/images/match/dhl_sctch.png') : require('@/public/images/match/dhl_scxb.png')" 
					@tap="seletRemindTime" 
				></image>
			</template>
		</uni-nav-bar>
		<view class="head flex-c">
			<view class="match-detail flex-r ac jc">
				<view class="match-team flex-c ac">
					<text>（主）</text>
					<image :src="match.homeLogo || require('@/public/images/public/zqdu.png')" mode="aspectFit"></image>
					<text class="team-name right">{{homeTeam}}</text>
				</view>
				<view class="match-team flex-c ac">
					<view class="status">
						<text>{{$CHS.getMatchFootStatus(statusId)}}</text>
						<text v-if="statusId > 1 && statusId < 8">{{getMatchMinute}}</text>
					</view>
					<view class="score flex-r ac jc text-bold">
						<text v-if="statusId > 1 && statusId < 9">
							{{$CHS.sumScoreFoot(match.homeScores)+' : '+$CHS.sumScoreFoot(match.awayScores)}}
						</text>
						<text v-else>
							VS
						</text>
					</view>
					<view class="des">
						<text class="overtime" v-if="statusId > 2 && statusId < 9">
						（半场 {{match.homeScores[1]}}:{{match.awayScores[1]}}{{match.homeScores[5] && match.awayScores[5] ? ' 加时 '+ match.homeScores[5] +':'+ match.awayScores[5] : ''}}{{match.homeScores[6] && match.awayScores[6] ? ' 点球 '+ match.homeScores[6] +':'+ match.awayScores[6] : ''}}）
						</text>
					</view>
				</view>
				<view class="match-team flex-c ac">
					<text>（客）</text>
					<image :src="match.awayLogo || require('@/public/images/public/zqdu.png')" mode="aspectFit"></image>
					<text class="team-name">{{awatTeam}}</text>
				</view>
			</view>
			<view class="head-tab flex-r ac" :class="navBorder ? 'navborder':''">
				<template v-for="(item, index) in tabList">
					<view class="tab-list flex-c ac jc" :key="index" v-if="index != 1 || seasonRank[0]" @tap="tabChange(index)">
						<text class="text-primary" :class="{'active': tabCur == index}">{{item.name}}</text>
						<view class="tab-list-select" v-if="tabCur == index"></view>
					</view>
				</template>
			</view>
		</view>
		<scroll-view
			class="scroll-Y" 
			:refresher-enabled="true" 
			refresher-default-style="none" 
			:scroll-y="true"
			:scroll-top="scrollTop"
			:refresher-triggered="refreshing"
			refresher-background="rgba(255, 255, 255, 0)"
			@refresherrefresh="refresh"
			@scrolltolower="reachBottom"
			@scroll="scroll"
		>
		<view class="body" @touchstart="touchStart" @touchend="touchEnd">
			<keep-alive>
				<view class="article flex-c" v-if="tabCur == 0">
					<template  v-if="!articleList[0]">
						<EmptyContent top="155rpx" text="暂无更新的料" img="qsy_zwxl" @refresh="getListData(tabCur)"></EmptyContent>
					</template>
					<template v-else>
						<ArticleList :list="articleList" type="match" :showResult="true" :marginTop="false" :showSP="false" :remark="true"></ArticleList>
					</template>
					<view class="list-end flex-r pb20" v-if="tabData[tabCur].isEnd && articleList[0]">
						<text>已经到底啦～</text>
					</view>
				</view>
			</keep-alive>
			<keep-alive>
				<view class="expert flex-c" v-if="tabCur == 1 && seasonRank[0]">
					<SeasonRank :list="seasonRank" :seasonId="match.seasonId" :sportId="sportId"></SeasonRank>
				</view>
			</keep-alive>
			<keep-alive>
				<view class="live flex-c" v-if="tabCur == 2" >
					<view class="live-score flex-r">
						<view class="score-head flex-c">
							<view class="head-item flex-r" v-for="(item, index) in liveHeadData" :key="index">
								<image :src="require('@/public/images/match/'+item.icon+'.png')" mode="aspectFit"></image>
								<text class="name color-grey">{{item.name}}</text>
							</view>
						</view>
						<view class="stats flex-c">
							<view class="stats-item flex-r">
								<view class="home flex-r">
									<text class="name color-blue">{{homeTeam}}</text>
								</view>
								<view class="away flex-r">
									<text class="name color-red">{{awatTeam}}</text>
								</view>
							</view>
							<view class="stats-item flex-r" v-for="(item, index) in liveHeadData.slice(1,9)" :key="item.icon">
								<view class="home flex-r color-blue">
									<text class="name" v-if="matchStatsData[index]">{{matchStatsData[index].home}}</text>
									<text v-else>0</text>
								</view>
								<view class="away flex-r color-red">
									<text class="name" v-if="matchStatsData[index]">{{matchStatsData[index].away}}</text>
									<text v-else>0</text>
								</view>
							</view>
						</view>
					</view>
					<view class="live-content">
						<view class="content-head flex-r ac">
							文字直播
						</view>
						<view class="content-body flex-r ac jc">
							<EmptyContent v-if="!matchTextLive" top="70rpx" text="暂无内容" img="qsy_zwxl" @refresh="getListData(tabCur)"></EmptyContent>
							<view class="live-list flex-c" v-else>
								<view class="live-list-item flex-r ac" v-for="(item, index) in matchTextLiveData" :key="index">
									<view class="item-icon">
										<image class="inheritwh" :src="require('@/public/images/match/'+item.icon+'.png')" mode="aspectFit"></image>
									</view>
									<view class="item-text">
										<rich-text :nodes="item.data"></rich-text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</keep-alive>
			<keep-alive>
				<view class="index" v-if="tabCur == 3">
					<view class="index-head">
						<view class="tab-head flex-r ac">
							<view class="tab-list" v-for="(item,index) in indexTab.tabList" :key="index" @tap="indexTabChange(index)">
								<text class="text-regular color-grey" :class="{'active': indexTab.tabCur == index}">{{item}}</text>
							</view>
						</view>
					</view>
					<view class="index-body">
						<keep-alive>
							<view class="index-list rang flex-c" v-if="indexTab.tabCur != 1">
								<template v-if="matchZsList[zsType] && matchZsList[zsType][0]">
									<view class="index-list-item flex-r color-grey">
										<view class="item-one">
											<text>公司</text>
										</view>
										<view class="item-two">
											<text>初始</text>
										</view>
										<view class="item-three">
											<text>赛前</text>
										</view>
										<view class="item-four">
											<text>详情</text>
										</view>
									</view>
									<view class="index-list-item flex-r" v-for="(zs, index) in matchZsList[zsType]" :key="index">
										<view class="item-one">
											<!-- <text class="text-hidden">{{ zs.companyName.match(/^[\u4e00-\u9fa5]+$/gi) ? zs.companyName.slice(0, 1) : zs.companyName.slice(0, 2)}}*</text> -->
											<text class="text-hidden">{{ zs.companyName }}</text>
										</view>
										<view class="item-two flex-r">
											<text>{{zs.initialValue.homeWin}}</text>
											<text>{{zs.initialValue.drawWin}}</text>
											<text>{{zs.initialValue.awayWin}}</text>
										</view>
										<view class="item-three flex-r" v-if="zs.beforeStart">
											<text :class="{'color-red': Number(zs.beforeStart.homeWin) > Number(zs.initialValue.homeWin), 'color-green': Number(zs.beforeStart.homeWin) < Number(zs.initialValue.homeWin)}">{{zs.beforeStart.homeWin}}</text>
											<text :class="{'color-red': Number(zs.beforeStart.drawWin) > Number(zs.initialValue.drawWin), 'color-green': Number(zs.beforeStart.drawWin) < Number(zs.initialValue.drawWin)}">{{zs.beforeStart.drawWin}}</text>
											<text :class="{'color-red': Number(zs.beforeStart.awayWin) > Number(zs.initialValue.awayWin), 'color-green': Number(zs.beforeStart.awayWin) < Number(zs.initialValue.awayWin)}">{{zs.beforeStart.awayWin}}</text>
										</view>
										<view class="item-three flex-r" v-else>
											<text>-</text>
											<text>-</text>
											<text>-</text>
										</view>
										<view class="item-four color-blue" @tap="goZsDetail(zsType,index)">
											<text>查看</text>
										</view>
									</view>
								</template>
								<EmptyContent v-else top="70rpx" text="暂无内容" img="qsy_zwxl" @refresh="getListData(tabCur)"></EmptyContent>
							</view>
						</keep-alive>
						<keep-alive>
							<view class="index-list sheng flex-c" v-if="indexTab.tabCur == 1">
								<template v-if="matchZsList[zsType] && matchZsList[zsType][0]">
									<view class="index-list-item flex-r one color-grey">
										<view class="item-one">
											<text></text>
										</view>
										<view class="item-two">
											<text></text>
										</view>
										<view class="item-three">
											<text>主胜</text>
										</view>
										<view class="item-four">
											<text>平局</text>
										</view>
										<view class="item-five">
											<text>客胜</text>
										</view>
										<view class="item-six">
											<text></text>
										</view>
									</view>
									<view class="index-list-item flex-r two" v-if="zsMathInfo[0]">
										<view class="item-one">
											<text>最高值</text>
										</view>
										<view class="item-two color-grey">
											<text>初始</text>
											<text>赛前</text>
										</view>
										<view class="item-three">
											<text>{{zsMathInfo[0][0][0]}}</text>
											<text :class="{'color-red': Number(zsMathInfo[0][1][0]) > Number(zsMathInfo[0][0][0]), 'color-green': Number(zsMathInfo[0][1][0]) < Number(zsMathInfo[0][0][0])}">{{zsMathInfo[0][1][0]}}</text>
										</view>
										<view class="item-four">
											<text>{{zsMathInfo[0][0][1]}}</text>
											<text :class="{'color-red': Number(zsMathInfo[0][1][1]) > Number(zsMathInfo[0][0][1]), 'color-green': Number(zsMathInfo[0][1][1]) < Number(zsMathInfo[0][0][1])}">{{zsMathInfo[0][1][1]}}</text>
										</view>
										<view class="item-five">
											<text>{{zsMathInfo[0][0][2]}}</text>
											<text :class="{'color-red': Number(zsMathInfo[0][1][2]) > Number(zsMathInfo[0][0][2]), 'color-green': Number(zsMathInfo[0][1][2]) < Number(zsMathInfo[0][0][2])}">{{zsMathInfo[0][1][2]}}</text>
										</view>
										<view class="item-six">
											<text></text>
										</view>
									</view>
									<view class="index-list-item flex-r two" v-if="zsMathInfo[1]">
										<view class="item-one">
											<text>最低值</text>
										</view>
										<view class="item-two  color-grey">
											<text>初始</text>
											<text>赛前</text>
										</view>
										<view class="item-three">
											<text>{{zsMathInfo[1][0][0]}}</text>
											<text :class="{'color-red': Number(zsMathInfo[1][1][0]) > Number(zsMathInfo[1][0][0]), 'color-green': Number(zsMathInfo[1][1][0]) < Number(zsMathInfo[1][0][0])}">{{zsMathInfo[1][1][0]}}</text>
										</view>
										<view class="item-four">
											<text>{{zsMathInfo[1][0][1]}}</text>
											<text :class="{'color-red': Number(zsMathInfo[1][1][1]) > Number(zsMathInfo[1][0][1]), 'color-green': Number(zsMathInfo[1][1][1]) < Number(zsMathInfo[1][0][1])}">{{zsMathInfo[1][1][1]}}</text>
										</view>
										<view class="item-five">
											<text>{{zsMathInfo[1][0][2]}}</text>
											<text :class="{'color-red': Number(zsMathInfo[1][1][2]) > Number(zsMathInfo[1][0][2]), 'color-green': Number(zsMathInfo[1][1][2]) < Number(zsMathInfo[1][0][2])}">{{zsMathInfo[1][1][2]}}</text>
										</view>
										<view class="item-six">
											<text></text>
										</view>
									</view>
									<view class="index-list-item flex-r two" v-if="zsMathInfo[2]">
										<view class="item-one">
											<text>平均值</text>
										</view>
										<view class="item-two color-grey">
											<text>初始</text>
											<text>赛前</text>
										</view>
										<view class="item-three">
											<text>{{zsMathInfo[2][0][0]}}</text>
											<text :class="{'color-red': Number(zsMathInfo[2][1][0]) > Number(zsMathInfo[2][0][0]), 'color-green': Number(zsMathInfo[2][1][0]) < Number(zsMathInfo[2][0][0])}">{{zsMathInfo[2][1][0]}}</text>
										</view>
										<view class="item-four">
											<text>{{zsMathInfo[2][0][1]}}</text>
											<text :class="{'color-red': Number(zsMathInfo[2][1][1]) > Number(zsMathInfo[2][0][1]), 'color-green': Number(zsMathInfo[2][1][1]) < Number(zsMathInfo[2][0][1])}">{{zsMathInfo[2][1][1]}}</text>
										</view>
										<view class="item-five">
											<text>{{zsMathInfo[2][0][2]}}</text>
											<text  :class="{'color-red': Number(zsMathInfo[2][1][2]) > Number(zsMathInfo[2][0][2]), 'color-green': Number(zsMathInfo[2][1][2]) < Number(zsMathInfo[2][0][2])}">{{zsMathInfo[2][1][2]}}</text>
										</view>
										<view class="item-six">
											<text></text>
										</view>
									</view>
									<view class="index-list-item flex-r one color-grey" v-if="matchZsList[zsType]">
										<view class="item-one">
											<text>公司</text>
										</view>
										<view class="item-two">
											<text></text>
										</view>
										<view class="item-three">
											<text>主胜</text>
										</view>
										<view class="item-four">
											<text>平局</text>
										</view>
										<view class="item-five">
											<text>客胜</text>
										</view>
										<view class="item-six">
											<text>详情</text>
										</view>
									</view>
									<view class="index-list-item flex-r two" v-for="(zs, index) in matchZsList[zsType]" :key="index">
										<view class="item-one">
											<!-- <text class="text-hidden">{{ zs.companyName.match(/^[\u4e00-\u9fa5]+$/gi) ? zs.companyName.slice(0, 1) : zs.companyName.slice(0, 2)}}*</text> -->
											<text class="text-hidden">{{ zs.companyName }}</text>
										</view>
										<view class="item-two color-grey">
											<text>初始</text>
											<text>赛前</text>
										</view>
										<view class="item-three">
											<text>{{zs.initialValue.homeWin}}</text>
											<text v-if="zs.beforeStart" :class="{'color-red': Number(zs.beforeStart.homeWin) > Number(zs.initialValue.homeWin), 'color-green':Number(zs.beforeStart.homeWin) < Number(zs.initialValue.homeWin)}">{{zs.beforeStart.homeWin}}</text>
											<text v-else>-</text>
										</view>
										<view class="item-four">
											<text>{{zs.initialValue.drawWin}}</text>
											<text v-if="zs.beforeStart" :class="{'color-red': Number(zs.beforeStart.drawWin) > Number(zs.initialValue.drawWin), 'color-green':Number(zs.beforeStart.drawWin) < Number(zs.initialValue.drawWin)}">{{zs.beforeStart.drawWin}}</text>
											<text v-else>-</text>
										</view>
										<view class="item-five">
											<text>{{zs.initialValue.awayWin}}</text>
											<text v-if="zs.beforeStart" :class="{'color-red': Number(zs.beforeStart.awayWin) > Number(zs.initialValue.awayWin), 'color-green':Number(zs.beforeStart.awayWin) < Number(zs.initialValue.awayWin)}">{{zs.beforeStart.awayWin}}</text>
											<text v-else>-</text>
										</view>
										<view class="item-six" @tap="goZsDetail(zsType,index)">
											<text class="color-blue">查看</text>
										</view>
									</view>
								</template>
								<EmptyContent v-else top="70rpx" text="暂无内容" img="qsy_zwxl" @refresh="getListData(tabCur)"></EmptyContent>
							</view>
						</keep-alive>
					</view>
				</view>
			</keep-alive>
		</view>
		</scroll-view>
		<AppDown :bottom="false" v-if="platform!='ios'"></AppDown>
		<MatchRemind v-if="visible" :datetime="match.matchTime" @close="visible=false" @submit="favMatch($event)"></MatchRemind>
	</view>
</template>

<script>
	import matchMixin from './mixin/match.js'
	export default {
		mixins: [matchMixin],
		data() {
			return {
				sportId: 1, //比赛类型：足球
				
				indexTab: {//指数tab信息
					tabList: ['让球', '胜平负', '总进球', '角球'],
					tabArr: [0],
					tabCur: 0,
					tabData: [
						{pageNo: 1,	isEnd: false},
						{pageNo: 1,	isEnd: false},
						{pageNo: 1,	isEnd: false},
						{pageNo: 1,	isEnd: false}
					],
				},
				liveHeadData: [//直播技术统计类型数据
					{name: '球队', icon: 'qd', type: null},
					{name: '进攻', icon: 'jg', type: 23},
					{name: '危险进攻', icon: 'wxjg', type: 24},
					{name: '控球率', icon: 'kql', type: 25},
					{name: '射正球门', icon: 'szqm', type: 21},
					{name: '射偏球门', icon: 'spqm', type: 22},
					{name: '角球', icon: 'jq', type: 2},
					{name: '红牌', icon: 'hp', type: 4},
					{name: '黄牌', icon: 'chp', type: 3}
				],

				zsTypeData: ['asia','eu','bs','cr'], //指数类型
			}
		},
		computed: {
			//获取比赛开始时间
			getMatchMinute() {
				if(this.matchLive.score){
					let json = JSON.parse(this.matchLive.score)
					let startTime = json[4]
					let status = json[1]
					let nowTime = Date.parse(new Date())/1000
					if(status == 3 || nowTime < startTime){
						return ''
					}else{
						let minute = 0
						if(status == 2){
							minute = (nowTime - startTime)/60 + 1
						}else if(status > 3 && status < 8){
							minute =  (nowTime - startTime)/60 + 46
						}
						return ' ' + parseInt(minute) + "'"
					}
				}else{
					return ''
				}
			},
			//比赛统计数据
			matchStats() {
				if(this.matchLive.stats){
					return JSON.parse(this.matchLive.stats)
				}else{
					return false
				}
			},
			//实时直播数据
			matchTextLive() {
				if(this.matchLive.tlive && this.match.matchId){
					this.matchLive.tlive = this.matchLive.tlive.replace(new RegExp(this.homeTeam, 'g'), '<span style=\'color:#4C88FF\'>'+this.homeTeam+'</span>')
					this.matchLive.tlive = this.matchLive.tlive.replace(new RegExp(this.awatTeam, 'g'), '<span style=\'color:#F23030\'>'+this.awatTeam+'</span>')
					return JSON.parse(this.matchLive.tlive).reverse()
				}else{
					return false
				}
			}
		},
		watch: {
			//实时比赛统计数据处理
			matchStats(newValue, oldValue) {
				if(newValue){
					this.liveHeadData.slice(1,9).forEach(data => {
						let json = newValue
						let stats = json.find(item => {
							return item.type == data.type
						})
						if(stats){
							this.matchStatsData.push(stats)
						}else{
							this.matchStatsData.push({home:0, away:0, type:data.type})
						}
					})
				}
			},
			//实时直播数据处理
			matchTextLive(newValue, oldValue) {
				if(newValue){
					this.matchTextLiveData = []
					newValue.forEach(item => {
						item.icon = this.getStatsIcon(item.type)
						this.matchTextLiveData.push(item)
					})
					console.log(this.matchTextLiveData);
				}
			}
		},
		methods: {
			/**
			 * @description 上滑加载更多方案
			 */
			reachBottom() {
				if(this.tabCur == 0){
					if(!this.tabData[this.tabCur].isEnd){
						this.tabData[this.tabCur].pageNo += 1
						this.getArticles(this.tabData[this.tabCur].pageNo)
					}
				}
			},
			/**
			 * @description 获取比赛事件ICON
			 * @param {string} type 事件类型
			 * @return {string} 返回icon名称
			 */
			getStatsIcon(type) {
				let statsIcon = ['mr','jg','jq', 'chp', 'hp', 'yw', 'ryq', 'qmq', 'dq', 'hr', 'sz', 'sz', 'sz', 'bcbf', 'mr', 'lhbh', 'dqwj', 'wlq', 'zg', 'stbs', 'mr', 'szqm', 'spqm', 'jg', 'wxjg', 'kql', 'sz', 'sz', 'var', 'dq', 'dqwj']
				if(statsIcon[type]){
					return statsIcon[type]
				}else{
					return 'sz'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		.headbg{
			max-width: $max-width;
			margin: $pc-margin;
			z-index: 4;
			width: 750rpx;
			position: fixed;
			top: -40rpx;
			left: 0;
			right: 0;
			image{
				width: 750rpx;
				max-width: $max-width;
			}
		}
		.ch-nav{
			.text-mini{
				margin-top: 10rpx;
			}
		}
		.head{
			position: fixed;
			max-width: $max-width;
			width: 750rpx;
			z-index: 5;
			.match-detail{
				padding: 0 20rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				.score{
					height: 136rpx;
					font-size: 72rpx;
					font-family: Arial;
					font-weight: bold;
					text{
						white-space: nowrap;
					}
				}
				.match-team{
					width: 236rpx;
					height: 312rpx;
					box-sizing: border-box;
					padding: 50rpx 0 0;
					justify-content: flex-start;
					image{
						box-sizing: border-box;
						height: 136rpx;
						padding: 20rpx 0;
						width: 96rpx;
					}
					.team-name{
						max-width: 150rpx;
						line-height: 30rpx;
						&.right{
							text-align: right;
						}
					}
					.des{
						line-height: 30rpx;
					}
					.overtime{
						white-space: nowrap;
					}
				}
			}
			.head-tab{
				max-width: $max-width;
				width: 750rpx;
				height: 88rpx;
				justify-content: space-around;
				background-color: #FFFFFF;
				.tab-list{
					position: relative;
					height: 88rpx;
					flex: 2;
					.active{
						font-weight: 500;
						color: #0055FF;
					}
					.tab-list-select{
						position: absolute;
						bottom: 0;
						width: 40rpx;
						height: 8rpx;
						background-color: #0055FF;
						border-radius: 4rpx;
					}
				}
			}
		}
		.scroll-Y{
			margin-top: calc(312rpx + 88rpx);
			height: calc(var(--safe-height) - #{$navbar-height} - 312rpx - 88rpx);
			/deep/ .uni-scroll-view-content{
				padding-top: 10rpx;
				height: calc(100% - 10rpx);
			}
		}
	}
	.body{
		.article{
			padding: 10rpx 20rpx 0;
		}
		.expert{
			margin-top: 10rpx;
			background-color: #FFFFFF;
		}
		.live{
			padding: 10rpx 0 0;
			.live-score{
				padding: 20rpx;
				background: #FFFFFF;
				.score-head{
					width: 170rpx;
					.head-item{
						height: 60rpx;
						align-items: center;
						image{
							width: 32rpx;
							height: 32rpx;
						}
						.name{
							margin-left: 15rpx;
							font-size: 24rpx;
							line-height: 36rpx
						}
						border-bottom: 1rpx solid #FFFFFF;
					}
					.head-item:last-child{
						border: none;
					}
				}
				.stats{
					.stats-item{
						align-items: center;
						.home, .away{
							width: 270rpx;
							height: 60rpx;
							align-items: center;
							justify-content: center;
							box-sizing: border-box;
							padding: 0 10rpx;
						}
						.home{
							background: #F2F7FF;
						}
						.away{
							background: #FFF2F2;
							border-left: 1rpx solid #FFFFFF;
						}
						.name{
							font-size: 24rpx;
							line-height: 24rpx
						}
						border-bottom: 1rpx solid #FFFFFF;
					}
					.stats-item:last-child{
						border: none;
					}
				}
			}
			.live-content{
				margin: 20rpx 0;
				background: #FFFFFF;
				.content-head{
					padding: 30rpx 20rpx;
					font-size: 30rpx;
					font-weight: bold;
				}
				.content-body{
					padding: 50rpx 0 60rpx;
					.live-list{
						background-image: url("~@/public/images/match/jdx.png");
						background-repeat: repeat-y;
						background-position: 36rpx 40rpx;
						background-size: 2rpx;
						.live-list-item{
							padding: 25rpx 20rpx;
							.item-icon{
								width: 32rpx;
								height: 32rpx;
							}
							.item-text{
								margin-left: 20rpx;
								font-size: 24rpx;
								color: #666666;
								line-height: 36rpx;
							}
						}
						.live-list-item:first-child{
							padding-top: 0;
							margin-top: -20rpx;
						}
						.live-list-item:last-child{
							padding-bottom: 0;
							margin-bottom: -25rpx;
						}
					}
					
				}
			}
		}
		.index{
			margin-top: -10rpx;
			.index-head{
				max-width: $max-width;
				width: 750rpx;
				height: 88rpx;
				background-color: #F2F5FA;
				z-index: 2;
				.tab-head{
					padding: 0 20rpx;;
					height: 88rpx;
					.tab-list{
						.text-regular{
							font-weight: 500;
						}
						.active{
							color: #4C88FF;
						}
						margin-right: 70rpx;
					}
					.tab-list:first-child text{
						margin-right: 0;
					}
				}
			}
			.index-body{
				padding-bottom: 20rpx;
				.index-list{
					font-size: 24rpx;
					line-height: 24rpx;
					&.rang{
						.index-list-item{
							align-items: center;
							padding: 0 20rpx;
							height: 80rpx;
							.item-one, .item-four{
								width: 100rpx;
							}
							.item-four{
								text-align: right;
							}
							.item-two, .item-three{
								width: 240rpx;
								display: flex;
								justify-content: center;
								text{
									width: 80rpx;
									display: flex;
									justify-content: center;
								}
							}
							.item-three{
								margin-left: 30rpx;
							}
							.text-hidden{
								display: inline-block;
								width: 90rpx;
							}
							.color-grey{
								color: #B3B3B3;
							}
						}
					}
					&.sheng{
						.index-list-item{
							align-items: center;
							padding: 0 20rpx;
							.item-one, .item-six{
								width: 100rpx;
							}
							.item-two,{
								width: 90rpx;
							}
							.item-three, .item-four, .item-five{
								width: 140rpx;
							}
							.item-two, .item-three, .item-four, .item-five{
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								text{
									width: 80rpx;
									display: flex;
									justify-content: center;
									align-items: center;
								}
							}
							.item-six{
								text-align: right;
							}
							&.one{
								height: 80rpx;
							}
							&.two{
								height: 120rpx;
								.item-two, .item-three, .item-four, .item-five{
									text:first-child{
										margin-bottom: 10rpx;
									}
								}
							}
							.text-hidden{
								display: inline-block;
								width: 90rpx;
							}
							.color-grey{
								color: #B3B3B3;
							}
						}
					}
					.index-list-item:nth-child(2n){
						background: #F2F5FA;
					}
					.index-list-item:nth-child(2n-1){
						background: #FFFFFF;
					}
				}
			}
		}
	}
</style>
